<template>
  <div>
    <h1>请选择喜欢的专栏</h1>
    <span class="box" v-for="(item, index) in arr" :key="index">
      <input type="checkbox" :id="index" @change="setChangse(index, $event)" />
      <label :for="index">{{ item }}</label>
    </span>
    <ul>
      <li v-for="(item, index) in ularr" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['科幻', '喜剧', '动漫', '冒险', '科技', '军事', '娱乐', '奇闻'],
      ularr: []
    }
  },
  methods: {
    setChangse(i, e) {
      if (e.target.checked) {
        this.ularr.push(this.arr[i])
      } else {
        this.ularr.splice(this.ularr.indexOf(this.arr[i]), 1)
      }
    }
  }
}
</script>

<style lang="less">
.box {
  width: 60px;
  display: inline-block;
  margin: 0 10px;
  font-size: 20px;
}
</style>
